﻿<div class="row">
    <div class="col-lg-12">
        <h1>Search Members</h1>
    </div>
</div>
<div class="row">
    <div class="col-lg-8">
        <div style="margin:5px">Search by Name or email or phone (Enter at least 3 characters to start auto search)</div>
        <input class="form-control input-lg" data-auto-focus="true" name="searchCriteria" data-ng-model="searchCriteria" placeholder="Enter at least 3 characters to start auto search" />
        <div data-ng-show="noMatchesFound" class="alert alert-warning" style="margin-top: 10px;">No members matching specified criteria</div>
    </div>
</div>
<div class="row" data-ng-show="fetchInProgress" style="position: relative; z-index: -1;">
    <div class="col-lg-4 col-lg-offset-4">
        <img src="images/ajax-loader.gif" style="margin: 20px;" width="100" height="100" />
    </div>
</div>
<div class="table-responsive">
    <table data-ng-show="dataReady" style="margin-top: 30px;" class="table table-striped table-bordered table-condensed table-hover">
        <thead>
            <tr class="success">
                <th>Member ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Mobile Phone</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="member in members">
                <td>{{member.memberId}}</td>
                <td>{{member.contact.firstName}}</td>
                <td>{{member.contact.lastName}}</td>
                <td>{{member.contact.email}}</td>
                <td>{{member.contact.mobilePhone}}</td>
                <td><a href="#/member/{{member.memberId}}">Edit</a></td>
            </tr>
        </tbody>
    </table>
</div>